<template>
	<div class="TpCouponDh">
		<div class="TpCouponDh-item">
			<div class="TpCouponDh-itemleft">兑换码</div>
			<div class="TpCouponDh-itemright">
				<input type="text" placeholder="请输入兑换码" v-model="code" />
			</div>
		</div>
		<div class="TpCouponDh-btnbox">
			<div class="TpCouponDh-btn" @click="GetRedeemCodeApi">点击兑换</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "TpCouponDh",
		data() {
			return {
			code:'',
			SessionUserinfo:JSON.parse(sessionStorage.getItem("userinfo")),
			}
		},
		computed: {
			...mapGetters([
				'source',
			])
		},
		mounted(){
		},
		methods: {
			GetRedeemCodeApi() {
				let ajaxSign = {
					source:this.source,// string 是
					token:this.SessionUserinfo.token,// string 是
					userId:this.SessionUserinfo.id.toString(),// string 是 用户id
					code:this.code.toString(),// string 是 兑换码
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetRedeemCode(ajaxData)
					.then(res => {
					this.$dialog.toast({
						mes: res.msg,
						timeout: 1000
					})
					if (res.sta==200) {
						this.$router.push({
							path:"/"
						})
					}
					})
			}
		}
	}
</script>

<style scoped>
	.TpCouponDh {
		width: 100%;
	}
	
	.TpCouponDh-item {
		display: flex;
		justify-content: space-between;
		padding: .3rem .24rem .3rem .48rem;
		border: .01rem solid #EEECEC;
	}
	
	.TpCouponDh-itemleft {
		font-size: .35rem;
	}
	
	input {
		text-align: right;
		font-size: .28rem;
		color: #a4a4a4;
		border: none;
	}
	
	::-webkit-input-placeholder {
		font-size: .28rem;
		color: #A4A4A4;
	}
	
	.TpCouponDh-btnbox {
		width: 100%;
		padding: .24rem;
		box-sizing: border-box;
	}
	
	.TpCouponDh-btn {
		width: 100%;
		color: #fff;
		font-size: .35rem;
		background: #E25051;
		text-align: center;
		line-height: 1.01rem;
		box-sizing: border-box;
		border-radius: .05rem;
	}
</style>